<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部搜索框 -->
    <header>
        <div class="search-box">
            <label for="search">
                <i class="fa fa-search"></i>
            </label>
            <input type="text" id="search">
        </div>
    </header>
    <!-- 轮播图 -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="./images/carousel_01.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="./images/carousel_02.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="./images/carousel_03.jpg" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- 小方块分类部分 -->
    <div class="container classifys">
        <div class="row classify">
            <div class="big-classify">
                <div>
                    <img src="./images/travel_picture.png" alt="">
                </div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
        </div>
        <div class="row classify">
            <div class="big-classify">
                <div>
                    <img src="./images/planeticket_picture.png" alt="">
                </div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
        </div>
        <div class="row classify">
            <div class="big-classify">
                <div>
                    <img src="./images/hotel_picture.png" alt="">
                </div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
            <div class="little-classify">
                <div></div>
            </div>
        </div>
    </div>
    <script src="./js/common/jquery-v1.12.0.min.js"></script>
    <script src="./js/common/bootstrap.min.js"></script>
    <!-- <script src="./js/common/debounces.js"></script> -->
</body>
</html>